<div id="main">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ntModalLabel">{:lang('add/change_company_type')}</h4>
    </div>
    <div class="modal-body">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#home" data-toggle="tab" @click="changelang('zh')">{:lang('Chinese')}</a>
                    </li>
                    <li>
                        <a href="#profile" data-toggle="tab" @click="changelang('en')">{:lang('English')}</a>
                    </li>
                    <li>
                        <a href="#messages" data-toggle="tab" @click="changelang('pt')">{:lang('Portuguese')}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tab-content">
            <table class="table table-striped table-hover ntTable">
                <tbody>
                {if ($str neq 'cotypedit')}
                <tr>
                    <td class="col-md-2">{:lang('type_name')}<span class="required"></span></td>
                    <td>
                        <input type="text" class="form-control" v-model="data.cotypename" placeholder="{:lang('type_name')}"
                               value="">
                    </td>
                </tr>
                {/if}
                </tbody>
            </table>
            <div role="tabpanel" class="tab-pane active" id="home">
                {if ($str eq 'cotypedit')}
                <table class="table table-hover ntTable" style="margin-bottom: 0;">
                    <tbody>
                    <tr>
                        <td class="col-md-2">{:lang('type_name')}<span class="required"></span></td>
                        <td>
                            <input type="text" class="form-control" v-model="data.lang_zh" placeholder="{:lang('type_name')}">
                        </td>
                    </tr>
                    </tbody>
                </table>
                {/if}
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                {if ($str eq 'cotypedit')}
                <table class="table table-hover ntTable" style="margin-bottom: 0;">
                    <tbody>
                    <tr>
                        <td class="col-md-2">{:lang('type_name')}<span class="required"></span></td>
                        <td>
                            <input type="text" class="form-control" v-model="data.lang_en" placeholder="{:lang('type_name')}">
                        </td>
                    </tr>
                    </tbody>
                </table>
                {/if}
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">
                {if ($str eq 'cotypedit')}
                <table class="table table-hover ntTable" style="margin-bottom: 0;">
                    <tbody>
                    <tr>
                        <td class="col-md-2">{:lang('type_name')}<span class="required"></span></td>
                        <td>
                            <input type="text" class="form-control"v-model="data.lang_pt"  placeholder="{:lang('type_name')}">
                        </td>
                    </tr>
                    </tbody>
                </table>
                {/if}
            </div>
            {eq name="$Think.session.admin.position_id" value="1"}
            <!--管理员出现三个国家-->
            <div class="col-md-12 column">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#allcountry" data-toggle="tab" @click="changecountry('0')">{:lang('global')}</a>
                    </li>
                    <li>
                        <a href="#zhcountry" data-toggle="tab" @click="changecountry('2')">{:lang('CHINA')}</a>
                    </li>
                    <li>

                        <a href="#bacountry" data-toggle="tab" @click="changecountry('1')">{:lang('BRASIL')}</a>
                    </li>
                </ul>
            </div>
            <div class="tab-content" v-cloak>
                <div role="tabpanel" class="tab-pane active" id="allcountry">
                    <div class="row clearfix">
                        <div class="col-md-12">
                            <div class="cat_panel">
                                <table>
                                    <thead>
                                    <tr>
                                        <td colspan="2">{:lang('job_authorized')}</td>
                                    </tr>
                                    </thead>
                                </table>
                                <div style="height: 20vh;overflow: auto;">
                                    <table>
                                        <tbody>
                                        <tr v-for="(item,index) in positions">
                                            <td><label style="font-weight: normal;width: 100%;"><input class="cheitem"
                                                                                                       style="margin-right: 100px;"
                                                                                                       type="checkbox" v-model="data.checkall" :value="item.id"><template v-for="(item,index) in item.level">&nbsp;&nbsp;&nbsp;&nbsp;</template>{{item.langname}}</label>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="zhcountry">
                    <div class="row clearfix">
                        <div class="col-md-12">
                            <div class="cat_panel">
                                <table>
                                    <thead>
                                    <tr>
                                        <td colspan="2">{:lang('job_authorized')}</td>
                                    </tr>
                                    </thead>
                                </table>
                                <div style="max-height: 40vh;overflow: auto;">
                                    <table>
                                        <tbody>
                                        <tr v-for="(item,index) in positions">
                                            <td><label style="font-weight: normal;width: 100%;"><input class="cheitem"
                                                                                                       style="margin-right: 100px;"
                                                                                                       type="checkbox" v-model="data.checkall" :value="item.id"><template v-for="(item,index) in item.level">&nbsp;&nbsp;&nbsp;&nbsp;</template>{{item.langname}}</label>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="bacountry">
                    <div class="row clearfix">
                        <div class="col-md-12">
                            <div class="cat_panel">
                                <table>
                                    <thead>
                                    <tr>
                                        <td colspan="2">{:lang('job_authorized')}</td>
                                    </tr>
                                    </thead>
                                </table>
                                <div style="max-height: 40vh;overflow: auto;">
                                    <table>
                                        <tbody>
                                        <tr v-for="(item,index) in positions">
                                            <td><label style="font-weight: normal;width: 100%;"><input class="cheitem"
                                                                                                       style="margin-right: 100px;"
                                                                                                       type="checkbox" v-model="data.checkall" :value="item.id"><template v-for="(item,index) in item.level">&nbsp;&nbsp;&nbsp;&nbsp;</template>{{item.langname}}</label>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/eq}
            {neq name="$Think.session.admin.position_id" value="1"}
            <div class="row clearfix">
                <div class="col-md-12">
                    <div class="cat_panel">
                        <table>
                            <thead>
                            <tr>
                                <td colspan="2">{:lang('job_authorized')}</td>
                            </tr>
                            </thead>
                        </table>
                        <div style="max-height: 40vh;overflow: auto;">
                            <table>
                                <tbody>
                                <tr v-for="(item,index) in positions">
                                    <td><label style="font-weight: normal;width: 100%;"><input class="cheitem"
                                                                                               style="margin-right: 100px;"
                                                                                               type="checkbox" v-model="data.checkall" :value="item.id"><template v-for="(item,index) in item.level">&nbsp;&nbsp;&nbsp;&nbsp;</template>{{item.langname}}</label>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            {/neq}
            <input type="hidden" id="act" name="act" value="{$str}">
            <input type="hidden" name="id" id="id" value="{$id|default=''}">
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span
                class="glyphicon glyphicon-remove"></span>{:lang('cancel')}
        </button>
        <button type="button" @click="subfun" class="btn btn-primary" style="padding-left:24px;padding-right:24px">
            <span class="glyphicon glyphicon-floppy-disk"></span>{:lang('save')}
        </button>
    </div>
</div>
<script>
    new Vue({
        el: '#main',
        data: () => ({
            lang: 'zh',//语言
            iftijiao: true,
            positions: [],//职位
            country_id: '',
            data: {
                checkall: [],
                lang_zh: '',
                lang_en: '',
                lang_pt: '',
                position: '',
                cotypename:''
            }
        }),
        methods: {
            //保存数据
            subfun(){
                if (this.iftijiao) {
                    //提交的内容
                    if ($('#act').val() == 'cotypedit') {
                        var data = {
                            lang_zh: this.data.lang_zh,
                            lang_en: this.data.lang_en,
                            lang_pt: this.data.lang_pt,
                            act: $('#act').val(),
                            id: $('#id').val(),
                            position_ids: this.data.checkall,//获取的职位id
                        }
                    } else {
                        var data = {
                            act: $('#act').val(),
                            cotypename: this.data.cotypename,
                            position_ids: this.data.checkall,//获取的职位id
                        }
                    }
                    $.ajax({
                        url: '/admin/customer/' + $('#act').val(),
                        data,
                        type: 'post',
                        success: (data) => {
                            data = JSON.parse(data)
                            if (data.status != 1) {
                                change_mes_type('.modal-body .alert',data.status)
                                $('.modal-body .alert').show()
                                $('.modal-body .alert p').html('*' + data.msg + '<br>')
                                //toastr.warning(data.msg)
                            } else {
                                change_mes_type('.alert',data.status)
                                this.iftijiao = false
                                $('.alert').show()
                                $('.alert p').html('*' + data.msg + '<br>')
                                //toastr.info(data.msg)
                                $('#cocat_editModal').modal('toggle')
                            }
                        }
                    })
                }
            },
            getalldata(){
                //获取国家，编辑，添加的数据
                $.ajax({
                    url: '/admin/customer/' + $('#act').val(),
                    data: {
                        getcotype: '',
                        id: $('#id').val()
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        if (!data.country_id) {
                            //全局管理员，授权职位默认展示
                            this.country_id = '0';
                        } else {
                            //非全局管理员 默认展示
                            this.country_id = data.country_id;
                        }
                        this.getdata();//展示国家下的职务
                        if (data.info) {
                            //编辑的状态
                            this.data.lang_zh = data.info.lang_zh;//中文公司类型
                            this.data.lang_en = data.info.lang_en;//英文公司类型
                            this.data.lang_pt = data.info.lang_pt;//普文公司类型
                            this.data.checkall = data.info.position_ids.split(",");//职位ids
                        }
                    }
                })
            },
            //获取对应国家职位
            getdata(){
                $.ajax({
                    url: '/admin/api/postionfrmaes',
                    data: {
                        country_id: this.country_id,
                        table: 'position',
                        lang: this.lang
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        this.positions = data;
                    }
                })
            },
            //改变国家获取对应职位
            changecountry(country_id){
                this.country_id = country_id
                this.getdata();
            },
            //改变语言
            changelang(lang){
                this.lang = lang;
                this.getdata();
            }
        },
        created() {
            this.getalldata()
        }
    })
</script>
